<template>
        <div class="userlist">
            <el-input
                    placeholder="🔍请输入内容"
                    v-model="keywords"
                    clearable>
            </el-input>
            <span class="time">时间:{{spdate}}</span>
            <span class="sbqk">{{ysb}}/{{gsnumber}}</span>
            <ul class="mui-table-view" v-for='(item,i) in search(keywords)' :key="item.recid">
                <li class="mui-table-view-cell">
                    <router-link  :to="{path:'/home/FZBUserListContainer/FZBTableCheck/:id/:companyState/:reportedByOther/:information/:samplestatus',query:{id:item.recid,companyState:item.companyState,reportedByOther:item.reportedByOther,information:informationAll,samplestatus:item.samplestatus}}" class="mui-navigate-right">
                        <span class="company" v-if="item.reportedByOther==1&&informationAll=='业户'">{{item.companyName}}(被代报)</span>
                        <span class="company" v-if="item.reportedByOther==1&&informationAll=='调查员'">{{item.companyName}}(代报)</span>
                        <span class="company" v-if="item.reportedByOther==0">{{item.companyName}}</span>
                        <!--0:未上报1:已上报待审批2:审定通过3:驳回4:取回-->
                        <span class='fonts'>{{item.samplestatus}}</span>
                    </router-link>
                </li>
            </ul>
            <div v-if="isShowSelect"
                 style="background-color: rgba(0, 0, 0, 0.3); width: 100%; height: 100%; bottom: 0; position: fixed; z-index: 99999;">
                <div @click.stop="isShowSelect=!isShowSelect"
                     style="background-color: rgba(255,255,255,0.3); width: 100%;height: 75%; bottom: 25%;">
                </div>
                <mt-picker style="background-color: white; width: 100%; height: 25%;bottom: 0; position: absolute;"
                           :slots="slots"
                           @change="onValuesChange"></mt-picker>
            </div>
        </div>
    </template>
    
    <script>
        import { Indicator } from 'mint-ui';
        import {Toast} from 'mint-ui'
        export default {
            data() {
                return {
                    ysb: 0,
                    gsnumber: 0,
                    spdate: 0,
                    keywords: '',
                    schemeId: '',
                    schemeName: '上报',
                    resultList: [],
                    companyState: '',
                    information: '',
                    informationAll: '',
                    username: '',
                    isShowSelect: '',
                }
            },
            watch: {
                resultList(newVal){
                    if(newVal != []){
                        Indicator.close();
                    }
                }
            },
            created() {
    
            },
            mounted(){
                //回到企业列表页，清除所有到两个定时器
                clearInterval(this.$store.state.hyclitervalId);
                clearInterval(this.$store.state.intervalId);
                this.getAllSampleList();
                Indicator.open({
                            text: '加载中...',
                            spinnerType: 'fading-circle'
                        });
            },
            methods: {
                getAllSampleList(){
                        this.axios.post('http://zxdc.catsic.com:9090/sampling/scheme/getSampleList', {
                                    'data': {
                                        "name": localStorage.getItem("userName"),
                                    }
                                }, {
                                    'headers': {
                                        'Content-Type': 'application/json',
                                        'mobileHeader': '{"sessionId":' + localStorage.getItem('sessionId') + '}'
                                    }
                                }).then(result=>{
                                    console.log(result);
                                    if (result.data.status === "1000"){
                                        Toast("获取企业列表成功");
                                        this.spdate = result.data.data.dateTime;
                                        this.resultList = result.data.data.sampleList;
                                        this.informationAll = result.data.data.information;
                                        this.resultList.forEach(item => {
                                            console.log(item);
                                            if (item.samplestatus == "已上报") {
                                                this.ysb++;
                                            }
                                            this.gsnumber++;
                                        })
                                    }else if(result.data.status === "1001"){
                                        Indicator.close();
                                        Toast(result.data.msg);
                                    }else if(result.data.status == "4001"||result.data.status == "5005"||result.data.status == "1002"){
                                        Indicator.close();
                                        this.dateFlag = true;
                                        this.sessionId = "";
                                        localStorage.setItem('sessionId', JSON.stringify(this.sessionId));
                                        this.$store.commit("outLogin");
                                        this.msg = result.data.msg;
                                        Toast(this.msg);
                                        this.$router.push({
                                            path:'/login'
                                                });
                                    }else if(result.data.status === "5001"){
                                        Indicator.close();
                                        Toast(result.data.msg);
                                    }   
                                    }); 
                },
                search(keywords) {
                            return this.resultList.filter(item => {
                                // if(item.name.indexOf(keywords) != -1)
                                // 注意 在 ES6中，为字符串提供了一个新方法，叫做  String.prototype.includes('要包含的字符名称')
                                //  如果包含，则返回 true ，否则返回 false
                                //  contain
                                if (item.companyName.includes(keywords)) {
                                    return item
                                }
                            })
                },
                getData() {
                    this.axios.post('http://zxdc.catsic.com:9090/sampling/user/getuserinfo',{'data':{}},{
                        'headers':{
                            'Content-Type':'application/json',
                            'mobileHeader':'{"sessionId":'+ localStorage.getItem('sessionId')+'}'
                        }
                    }).then(result=>{
                        if(result.data.status == "1000"){
                            this.username = result.data.data.userName;
                            this.phoneNumber = result.data.data.phone;
                            this.roles = result.data.data.userInfoRoles;
                            localStorage.setItem("userName",result.data.data.userName);
                        }
                    },error=>{
                        console.log("UserListContainer.vue:getuserinfo request error:" + error);
                    });
                },
            },
        }
    </script>
    
    <style lang="scss" scoped>
        mt-header {
            z-index: 999;
            /*padding-top: 20px;*/
        }
    
        .mint-header {
            height: 40px;
            /*padding-top: 30px;*/
        }
    
        .userlist {
    
            height: 100%;
            width: 100%;
            /*padding-top: 80px;*/
            padding-top: 10px;
    
            /*padding-top: 20px;*/
            .fonts {
                font-size: 14px;
                color: #226aff;
                /* display: flex;
                justify-content:space-between; */
                /* margin: 0 10% 0 50%;
                display: inline-block;   */
                float: right;
                margin-right: 10%;
            }
            .time {
                font-size: 14px;
                color: #226aff;
                margin: 0 0 0 3%;
            }
            .sbqk {
                font-size: 14px;
                color: #226aff;
                margin: 0 0% 0 60%;
            }
            .company {
                font-size: 13px;
                color: #030303;
            }
            .mui-table-view-cell > a:not(.mui-btn).mui-active {
                background-color: #fff;
            }
            .morebutton{
                margin-bottom: 3%;
            }
            .el-input__icon {
                height: 70%;
                width: 25px;
                text-align: center;
                -webkit-transition: all .3s;
                transition: all .3s;
                line-height: 40px;
            }
        }
    </style>